<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>产品新增</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    <style>
        .expand.pear-btn:hover {
            color: currentColor;
            background: none;
        }

        .expand.pear-btn {
            border: 1px solid rgba(255, 255, 255, 0)
        }
    </style>
</head>

<body class="pear-container">
  <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
      <li class="layui-this">基础信息</li>
      <li style="pointer-events:none;">图片</li>
      <li style="pointer-events:none;">库存库位</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
      <div class="layui-tab-item layui-show">
        <form class="layui-form" action="" onsubmit="return false">
          <div class="layui-bg-gray" style="padding: 30px;">
            <div class="layui-row layui-col-space15">
              <div class="layui-col-md12">
                <div class="layui-card">
                  <div class="layui-card-header">基础资料</div>
                  <div class="layui-card-body">
                    <div class="layui-form-item">
                      <label class="layui-form-label">产品编号</label></label>
                      <div class="layui-input-inline">
                        <input type="text" name="goods_Bh" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
                      </div>
                      <label class="layui-form-label">产品名称</label></label>
                      <div class="layui-input-inline">
                        <input type="text" name="goods_Name" id="goods_Name" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
                      </div>
                      <label class="layui-form-label">产品简称</label>
                      <div class="layui-input-inline">
                        <input type="text" name="goods_JpName" id="goods_JpName" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
                      </div>
                      
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">产品规格</label>
                      <div class="layui-input-inline">
                        <input type="text" name="goods_Gg" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
                      </div>
                        <label class="layui-form-label">产品单位</label>
                        <div class="layui-input-inline">
                          <input type="text" name="goods_Unit" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
                        </div> 
                        <label class="layui-form-label">产品分类</label>
                        <div class="layui-input-inline">
                          <select name="classFy_id" id="classFy_id" class="layui-input">
                            <option value="-1">请选择分类</option>
                          </select>
                          <!-- <input type="text" id="tree" lay-filter="tree" class="layui-input"> -->
                        </div>            
                      </div>
                      <div class="layui-form-item layui-form-text">
                        <div class="layui-upload-drag" id="test10" style="display: none;" >
                            <i class="layui-icon"></i>
                            <p>点击上传，或将文件拖拽到此处</p>
                            <div class="layui-hide" id="uploadDemoView">
                              <hr>
                              <img src="" alt="上传成功后渲染" style="max-width: 196px">
                            </div>
                            <input type="hidden" name="imgPath" id="imgPath"></input>
                          </div>
                        <label class="layui-form-label">产品备注</label>
                        <div class="layui-input-block">
                          <textarea name="description" placeholder="请输入内容" class="layui-input" ></textarea>
                        </div>
                      </div>
                      
                  </div>
                </div>
              </div>
              <div class="layui-col-md12">
                <div class="layui-card">
                  <div class="layui-card-header">价格管理</div>
                  <div class="layui-card-body">
                    <div class="layui-form-item">
                      <label class="layui-form-label">销售价1</label></label>
                      <div class="layui-input-inline">
                        <input type="text" name="goods_Price1" required value="0.00"  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
                      </div>
                      <label class="layui-form-label">销售价2</label></label>
                      <div class="layui-input-inline">
                        <input type="text" name="goods_Price2" required  value="0.00" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
                      </div>
                      <label class="layui-form-label">销售价3</label>
                      <div class="layui-input-inline">
                        <input type="text" name="goods_Price3" required  value="0.00" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
                      </div>
                      
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">销售限价</label>
                      <div class="layui-input-inline">
                        <input type="text" name="saleslimit" required  value="0.00" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
                      </div>        
                      </div>
                  
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button class="layui-btn pear-btn-md pear-btn-primary " style="position:absolute;right:5px;bottom:5px;" lay-submit lay-filter="formDemo">立即保存</button>
                  </div>
                </div>
              </div>
                
            </div>
          </div> 
        </form>
      </div>
      <div class="layui-tab-item">图片</div>
      <div class="layui-tab-item">库存库位</div>
    </div>
  </div> 
    
</body>

</html>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script src="../Script/getPingyin.js"></script>
<script>

    layui.use(['table', 'form', 'upload', 'layer', 'laydate', 'jquery', 'util', 'drawer', 'dropdown','popup'], function () {
        var table = layui.table,
            laydate = layui.laydate,
            form = layui.form,
            $ = layui.$,
            layer = layui.layer,
            upload = layui.upload
            , util = layui.util;
        let drawer = layui.drawer;
        let dropdown = layui.dropdown;
        var popup = layui.popup;

        //layer.msg(getUrlParam("flid"));
        //alert(getUrlParam('name'));
        // $("#sjflmc").val(getUrlParam("name"));
        // $("#pid").val(getUrlParam("id"));
        form.on('submit(formDemo)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            $.ajax({
                type: "post",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: 'http://localhost:5161/api/Goods/GoodsAdd',
                data: JSON.stringify(data.field),
                headers: {
                    "Authorization": sessionStorage.getItem("token")
                },
                success: function (response) {
                    //alert(response.result);
                    if (response.result) {
                        parent.layer.msg("新增成功!", {time: 1000,icon: 1}, function () {
                            //重新加载父页面
                            parent.location.reload();

                            });
                    } else {
                        popup.failure("新增失败:" + data.msg);
                    }
                    
                }
            });
            return false;
        });
        //监听input文本可输入字数
$(function(){
   //输入框的值改变时触发
  $("#goods_Name").on("input",function(e){
    //获取input输入的值
    //console.log(e.delegateTarget.value);
    $("#goods_JpName").val(pinyin.getCamelChars(e.delegateTarget.value));
  });
});

//
//拖拽上传
upload.render({
    elem: '#test10'
    ,url: 'http://localhost:5161/api/Goods/FileSave' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
    ,headers:{"Authorization":sessionStorage.getItem("token")}
    ,done: function(res){
        if(res.isSuccess==true){
            layer.msg('上传成功');
            $("#imgPath").val(res.result);
            //layer.msg(res.files.file);
      layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', "http://localhost:5161/"+res.result);
        }else{
            layer.msg('上传失败'+res.msg);
        }
        
    }
  });
  //分类加载
  $.ajax({
            url: 'http://localhost:5161/api/ClassFy/GetClassFy',
            headers:{"Authorization":sessionStorage.getItem("token")},
            type: 'get',
            dataType: 'json',
            success: function(res) {
             // renderTable(res.data);
             res.data.sort(function(a,b) {
                return a.id-b.id;
             })
             var html="";
             $.each(res.data,function(index,item){
                html += "<option value=\""+item.id+"\">"+item.name+"</option>"
             });
             $("#classFy_id").append(html);
            
             //分类赋值
            var flid=getUrlParam("flid");
            if(flid=="-1"){
                flid="1";
            }
            $("#classFy_id").val(flid);
            form.render('select');
            //layer.msg("33333");
            }
          })
          
    });
</script>